<template>
  <view class="points-page">
    <!-- 顶部背景区域 -->
    <view class="header-section" :style="{ paddingTop: `calc(${statusBarHeight}px + 30rpx)` }">
      <!-- 返回按钮 -->
      <view class="back-btn" :style="{ top: `calc(${statusBarHeight}px + 30rpx)` }" @click="goBack">
        <u-icon name="arrow-left" color="#FFFFFF" size="44"></u-icon>
      </view>
      
      <!-- 积分信息 -->
      <view class="points-info">
        <view class="points-title">
          <u-icon name="gift-fill" color="#FFD700" size="40"></u-icon>
          <text>积分</text>
        </view>
        <view class="points-value">{{wallet.ticket}}</view>
      </view>
      
      <!-- 积分说明按钮 -->
      <view class="points-explain" :style="{ top: `calc(${statusBarHeight}px + 30rpx)` }">
        <u-icon name="info-circle" color="#FFFFFF" size="30"></u-icon>
        <text>积分说明</text>
      </view>
      
      <!-- 积分类型统计 -->
      <view class="points-stats">
        <view class="stats-item">
          <view class="stats-value">{{ticket_dec.give_amount}}</view>
          <view class="stats-label">补贴</view>
        </view>
        <view class="stats-item">
          <view class="stats-value">{{ticket_dec.use_order}}</view>
          <view class="stats-label">兑换</view>
        </view>
		<view class="stats-item">
		  <view class="stats-value">{{ticket_dec.result_order}}</view>
		  <view class="stats-label">退款</view>
		</view>
      </view>
    </view>
    
    <view class="content-container">
      <!-- 积分类型选项卡 -->
      <view class="tabs-container">
        <u-tabs 
          :list="tabsList" 
          :current="current"
          @change="tabChange"
          active-color="#8A2BE2"
          bar-width="60"
        ></u-tabs>
        
        <!-- 筛选条件 -->
        <view class="filter-section">
          <view class="filter-item" @click="showStartDatePicker">
            <text>变动时间</text>
            <view class="filter-value">{{ startDate || '请选择' }}</view>
          </view>
          <view class="filter-item">
            <text>—</text>
          </view>
          <view class="filter-item" @click="showEndDatePicker">
            <text>{{ endDate || '请选择' }}</text>
            <u-icon name="arrow-right" color="#C0C4CC" size="28"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 积分记录列表 -->
      <view class="list-container">
        <u-empty
          v-if="pointsList.length === 0"
          mode="data"
          text="暂无数据"
        ></u-empty>
        
        <scroll-view
          v-else
          scroll-y
          class="points-list-scroll"
          @scrolltolower="loadMore"
          :lower-threshold="100"
          refresher-enabled
          @refresherrefresh="onRefresh"
          :refresher-triggered="isRefreshing"
        >
          <view v-for="(item, index) in pointsList" :key="index">
            <view class="points-record-item">
              <view class="record-left">
                <view class="record-title">{{ item.source_type }}</view>
                <view class="record-title" style="font-size: 26rpx;">{{item.extra.sn}}</view>
                <view class="record-time">{{ item.create_time_format }}</view>
              </view>
              <view class="record-right" :class="item.change_type == 1 ? 'plus' : 'minus'">
                {{ item.change_type == 1 ? '+' : '-' }}{{ item.change_amount }}
              </view>
            </view>
          </view>
          
          <view class="loading-more">
            <u-loadmore 
              :status="loadStatus" 
              loading-text="努力加载中..." 
              loadmore-text="上拉加载更多"
              nomore-text="没有更多数据了"
            ></u-loadmore>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 日期选择器 - 开始日期 -->
    <u-picker
      v-model="showStartPicker"
      mode="time"
      :params="dateParams"
      @confirm="confirmStartDate"
      @cancel="cancelStartDate"
    ></u-picker>
    
    <!-- 日期选择器 - 结束日期 -->
    <u-picker
      v-model="showEndPicker"
      mode="time"
      :params="dateParams"
      @confirm="confirmEndDate"
      @cancel="cancelEndDate"
    ></u-picker>
  </view>
</template>

<script>
import { getWallet, getAccountLog } from "@/api/user";
export default {
  data() {
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1;
    const day = currentDate.getDate();
    
    return {
      statusBarHeight: 20, // 默认状态栏高度
      current: 0,
      tabsList: [
        { name: '全部' },
        { name: '平台补贴' },
        { name: '兑换商品' }
      ],
      wallet: {
        user_money: '0.00',
        total_recharge_amount: '0.00',
        total_order_amount: '0.00',
        refund_order_amount: '0.00',
      },
	  ticket_dec:{
		  give_amount:"0.00"
	  },
      pointsList: [],
      page: 1,
      limit: 20,
      loadStatus: 'loadmore', // loadmore, loading, nomore
      isRefreshing: false,
      
      // 日期选择相关
      showStartPicker: false,
      showEndPicker: false,
      startDate: '',
      endDate: '',
      dateParams: {
        year: {
          start: year - 1,
          end: year
        },
        month: {
          start: 1,
          end: 12
        },
        day: {
          start: 1,
          end: 31
        }
      }
    }
  },
  onLoad() {
    this.getStatusBarHeight();
    this.getWalletFun();
    this.getPointsList();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.pointsList = [];
    this.getPointsList().then(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    getStatusBarHeight() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight || 20;
      } catch (e) {
        console.error('获取状态栏高度失败', e);
      }
    },
    goBack() {
      uni.navigateBack();
    },
    getWalletFun() {
      getWallet().then((res) => {
        if (res.code == 1) {
          this.wallet = res.data;
		  this.ticket_dec = res.data.ticket_dec;
        }
      });
    },
    tabChange(index) {
      this.current = index;
      this.page = 1;
      this.pointsList = [];
      this.loadStatus = 'loadmore';
      this.getPointsList();
    },
    onRefresh() {
      this.isRefreshing = true;
      this.loadStatus = 'loading';
      this.page = 1;
      this.pointsList = [];
      this.getPointsList().then(() => {
        this.isRefreshing = false;
        this.loadStatus = 'nomore';
      });
    },
    async getPointsList() {
      if (this.loadStatus === 'nomore') return;
      
      this.loadStatus = 'loading';
      
      try {
        const params = {
          page_size: this.limit,
          page_no: this.page,
          type: this.current, // 0:全部, 1:消费使用, 2:充值记录
          source: 5,
        };
        
        // 添加日期筛选条件
        if (this.startDate) {
          params.start_time = this.startDate + ' 00:00:00';
        }
        
        if (this.endDate) {
          params.end_time = this.endDate + ' 23:59:59';
        }
        
        const res = await getAccountLog(params);
        
        if (res.code === 1) {
          const data = res.data;
          
          // 如果是第一页，直接替换列表；否则追加到列表末尾
          if (this.page === 1) {
            this.pointsList = data.list || [];
          } else {
            this.pointsList = [...this.pointsList, ...(data.list || [])];
          }
          
          // 更新加载状态
          this.loadStatus = data.more ? 'loadmore' : 'nomore';
          
          if (data.more) {
            this.page++;
          }
        } else {
          uni.showToast({
            title: res.msg || '加载失败',
            icon: 'none'
          });
          this.loadStatus = 'loadmore';
        }
      } catch (error) {
        console.error('获取账户记录失败', error);
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        });
        this.loadStatus = 'loadmore';
      }
      
      return Promise.resolve();
    },
    loadMore() {
      if (this.loadStatus !== 'loadmore') return;
      this.getPointsList();
    },
    
    // 日期选择相关方法
    showStartDatePicker() {
      this.showStartPicker = true;
    },
    showEndDatePicker() {
      this.showEndPicker = true;
    },
    confirmStartDate(e) {
      const { year, month, day } = e;
      this.startDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      this.showStartPicker = false;
      this.resetAndRefresh();
    },
    confirmEndDate(e) {
      const { year, month, day } = e;
      this.endDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      this.showEndPicker = false;
      this.resetAndRefresh();
    },
    cancelStartDate() {
      this.showStartPicker = false;
    },
    cancelEndDate() {
      this.showEndPicker = false;
    },
    resetAndRefresh() {
      this.page = 1;
      this.pointsList = [];
      this.loadStatus = 'loadmore';
      this.getPointsList();
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f7fa;
  height: 100%;
  overflow: hidden;
}

.points-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* 顶部背景区域 */
.header-section {
  background: linear-gradient(135deg, #8A2BE2 0%, #A45EE5 100%);
  padding: 30rpx;
  padding-bottom: 50rpx;
  position: relative;
  flex-shrink: 0;
  z-index: 10;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  z-index: 11;
}

.points-info {
  margin-top: 60rpx;
  padding: 0 20rpx;
}

.points-title {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  font-size: 32rpx;
}

.points-title text {
  margin-left: 10rpx;
}

.points-value {
  font-size: 80rpx;
  font-weight: bold;
  color: #FFFFFF;
  margin-top: 10rpx;
}

.points-explain {
  position: absolute;
  right: 30rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
  padding: 6rpx 16rpx;
  display: flex;
  align-items: center;
  z-index: 11;
}

.points-explain text {
  color: #FFFFFF;
  font-size: 24rpx;
  margin-left: 6rpx;
}

.points-stats {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  display: flex;
  margin-top: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.stats-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
}

.stats-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.stats-label {
  font-size: 24rpx;
  color: #999999;
  margin-top: 6rpx;
}

/* 内容容器 */
.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 选项卡容器 */
.tabs-container {
  background-color: #FFFFFF;
  flex-shrink: 0;
  z-index: 5;
}

/* 筛选条件 */
.filter-section {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #EEEEEE;
}

.filter-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666666;
}

.filter-item:first-child {
  margin-right: 20rpx;
}

.filter-item:last-child {
  margin-left: 20rpx;
  flex: 1;
  justify-content: flex-end;
}

.filter-value {
  color: #999999;
  margin-left: 10rpx;
}

/* 列表容器 */
.list-container {
  flex: 1;
  overflow: hidden;
}

/* 积分记录列表 */
.points-list-scroll {
  height: 100%;
}

.points-record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #EEEEEE;
}

.record-left {
  flex: 1;
}

.record-title {
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.record-time {
  font-size: 24rpx;
  color: #999999;
}

.record-right {
  font-size: 32rpx;
  font-weight: bold;
}

.record-right.plus {
  color: #8A2BE2;
}

.record-right.minus {
  color: #666666;
}

.loading-more {
  padding: 30rpx 0;
}
</style>